<template>
  <div class="filter-edit">
    <!-- <div slot="title" class="title">区县</div>
    <van-button round type="info" v-for="item in area" :key="item.id" :text="item.name" /> -->
    <toggle-tag :showTitle="'区县'" :tag-list="area" :tag-data="filter.address" @pushTag="pushArea" @spliceTag="spliceArea" />
    <div @click="showAll = !showAll" class="show-more" id="box">{{ word }}</div>
    <!-- <div slot="title" class="title">职业类型</div>
    <van-button round type="info" v-for="item in occupation" :key="item.id" :text="item.name" /> -->
    <toggle-tag :showTitle="'职业类型'" :tag-list="occupation" :tag-data="filter.businessScope" @pushTag="pushTag" @spliceTag="spliceTag">
      <template v-slot:before>
        <van-tag plain round size="large" :class="filter.businessScope.length >= Company.occupation.length ? 'active' : ''" @click="allOccupation">全部职业</van-tag>
      </template>
    </toggle-tag>
    <div @click="showAlls = !showAlls" class="show-more">{{ words }}</div>
    <!-- <div slot="title" class="title">信用等级</div> -->
    <!-- <van-button round type="info" v-for="item in Company.creditStar" :key="item.id" :class="filter.creditStar === item.name ? 'active' : ''" @click="change(item, '信用等级')" :text="item.name" /> -->
    <toggle-tag :radio="true" :showTitle="'信用等级'" :tag-list="Company.creditStar" :tag-data="filter.creditStar" @change="change" />
    <!-- <div slot="title" class="title">已认证客户服务数</div> -->
    <!-- <van-button round type="info" v-for="item in Company.staff" :key="item.id" :class="filter.staff === item.name ? 'active' : ''" @click="change(item, '已认证客户服务数')" :text="item.name" /> -->
    <toggle-tag :radio="true" :showTitle="'已认证客户服务数'" :tag-list="Company.staff" :tag-data="filter.staff" @change="change" />
    <!-- <div slot="title" class="title">职业类型</div> -->
    <!-- <van-button round type="info" v-for="item in Company.companySize" :key="item.id" :class="filter.companySize === item.name ? 'active' : ''" @click="change(item, '职业类型')" :text="item.name" /> -->
    <toggle-tag :radio="true" :showTitle="'职业类型'" :tag-list="Company.companySize" :tag-data="filter.companySize" @change="change" />
    <div>
      <van-button round type="info" color="purple" class="colorbutton" @click="emptyFilter">清除条件</van-button>
      <van-button round type="info" color="purple" class="colorbutton" @click="onFilter">确认筛选</van-button>
    </div>
  </div>
</template>

<script>
import Company from '@/api/constant/company'
import { getCompanys } from '@/api/company'
import { getStaffs } from '@/api/staff'

export default {
  name: 'FilterEdit',
  components: {},
  props: {
    filterName: { type: String, required: true }
  },
  data () {
    return {
      Company,
      showAll: false, // 标记数据是否需要完全显示的属性
      showAlls: false,
      filter: {
        address: [],
        businessScope: [],
        creditStar: '',
        staff: '',
        companySize: ''
      }
    }
  },
  computed: {
    area () {
      if (this.showAll === false) {
        // 当数据不需要完全显示的时候
        let showList = [] // 定义一个空数组
        if (this.Company.area.length > 1) {
          // 这里我们先显示前三个
          for (let i = 0; i < 10; i++) {
            showList.push(this.Company.area[i])
          }
        } else {
          showList = this.Company.area
        }
        return showList // 返回当前数组
      } else {
        return this.Company.area
      }
    },
    occupation () {
      if (this.showAlls === false) {
        // 当数据不需要完全显示的时候
        let showLists = [] // 定义一个空数组
        if (this.Company.occupation.length > 1) {
          // 这里我们先显示前三个
          for (let i = 0; i < 3; i++) {
            showLists.push(this.Company.occupation[i])
          }
        } else {
          showLists = this.Company.occupation
        }
        return showLists // 返回当前数组
      } else {
        return this.Company.occupation
      }
    },
    word () {
      return this.showAll === false ? '展开' : '收起'
    },
    words () {
      return this.showAlls === false ? '展开' : '收起'
    }
  },
  watch: {},
  created () {},
  mounted () {},
  methods: {
    pushArea (item) {
      this.filter.address.push(item.name)
    },
    spliceArea (index, value) {
      this.filter.address.splice(index, value)
    },
    pushTag (item) {
      this.filter.businessScope.push(item.name)
    },
    spliceTag (index, value) {
      this.filter.businessScope.splice(index, value)
    },
    allOccupation () {
      this.filter.businessScope = this.filter.businessScope.length < this.Company.occupation.length ? this.Company.occupation.map(item => item.name) : []
    },
    change (item, title) {
      if (title === '信用等级') {
        this.filter.creditStar = item.name
      } else if (title === '已认证客户服务数') {
        this.filter.staff = item.name
      } else if (title === '职业类型') {
        this.filter.companySize = item.name
      }
    },
    emptyFilter () {
      this.filter = { address: [], businessScope: [], creditStar: '', staff: '', companySize: '' }
    },
    async onFilter () {
      try {
        let filterData = []
        if (this.filterName === 'company') {
          // filterData = await getCompanyDetail(this.filter)
          filterData = await getCompanys({ companyName_like: '家政服务有限公司' })
        } else if (this.filterName === 'staff') {
          // filterData = await getStaffDetail(this.filter)
          filterData = await getStaffs({ company_like: '家政服务有限公司' })
        }
        this.$emit('filter-success', filterData)
        this.$emit('close')
        this.$toast('筛选成功')
      } catch (error) {
        console.log(error)
        this.$toast('筛选失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.title {
  font-family: 'STXihei';
  height: 50px;
  font-size: 28px;
  margin-top: 28px;
  margin-left: 38px;
  font-weight: 550;
  color: rgb(245, 179, 179);
}
/deep/ .van-button {
  background-color: transparent;
  border: 1px solid #969799;
  color: #969799;
  height: 52px;
  margin-top: 26px;
  margin-left: 30px;
  font-size: 15px;
  padding: 0 36px;
}
.develop {
  font-size: 30px;
  margin: auto;
}
.show-more {
  font-size: 30px;
  color: rgb(157, 142, 151);
  text-align: center;
  margin-top: 32px;
  font-weight: bold;
}
.colorbutton {
  font-size: 30px;
  height: 72px;
  width: 322px;
  margin-bottom: 30px;
  margin-left: 35px;
}
.active {
  color: #3296fa;
}
</style>
